<template>
    <HorizonScroll :target="target">
      <template v-slot:carousel_content>
        <section class="tuijian_main">
          <div class="index_hd">
        <div class="index_title">
          <h2 class="icon_txt"> 歌单推荐</h2>
        </div>
      </div>
        <div class="tab_index">
          <a href="#!">为你推荐</a>
          <a href="#!">短视频热歌</a>
          <a href="#!">官方歌单</a>
          <a href="#!">古风</a>
          <a href="#!">情歌</a>
          <a href="#!">经典</a>
        </div>
       <div id="carousel_tuijian" class="carousel slide">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <ItemCard :PathFolder="PathFolder" :Nums="Shownums" :need="true"></ItemCard>
          </div>
          <div class="carousel-item">
            <ItemCard :PathFolder="PathFolder" :Nums="Shownums" :need="true"></ItemCard>
          </div>
          <div class="carousel-item">
            <ItemCard :PathFolder="PathFolder" :Nums="Shownums" :need="true"></ItemCard>
          </div>
        </div>

       </div>

     
      </section>

      </template>
    </HorizonScroll>  

</template>

  <script>
  const PathFolder = require.context('@/assets/tuijian/gufeng', false, /\.(png|jpg|jpeg|gif|webp)$/);//读取图片,返回一个函数
  import HorizonScroll from '../HorizonScroll.vue';
  import ItemCard from '../ItemCard.vue';
  export default {
    name: 'TuiJian',
    components:{
      HorizonScroll,
      ItemCard
    },
    data(){
      return{
        Shownums:5,
        PathFolder,
        target:'#carousel_tuijian'
      }
    }
  }
  </script>
  
  <style scoped lang="scss">
      @import '@/Style/scss/title.scss'; 
      @import '@/Style/scss/_variables.scss';
      #carousel_tuijian{
      width: 1200px;
      }
      .wrap{//不可删除，这是通过horizonscroll组件控制背景色的属性
      background-color: $primary-color;
    }
    .index_title{
      background-position: $bg-offset-tuijian;
    }

  </style>
  